<template>
    <a-space direction="vertical" style="position: relative; gap: 0">
        <div style="position: absolute; top: 0; right: 0">
            <a-button
                    :type="btnSize === 'small' ? 'primary' : 'default'"
                    @click="handleChangeBtnSize('small')"
            >小
            </a-button>
            <a-button
                    :type="btnSize === 'middle' ? 'primary' : 'default'"
                    @click="handleChangeBtnSize('middle')"
            >中
            </a-button>
            <a-button
                    :type="btnSize === 'large' ? 'primary' : 'default'"
                    @click="handleChangeBtnSize('large')"
            >大
            </a-button>
        </div>
        <a-descriptions :column="1" title="特征标注" bordered>
            <a-descriptions-item
                    :label-style="{ padding: '6px 8px', maxWidth: '60%' }"
                    :content-style="{ padding: '6px 8px' }"
                    v-for="item in annotationForm"
                    :label="item.title"
                    :key="item.title"
            >
                <a-button
                        :size="btnSize"
                        style="margin-right: 6px; margin-top: 6px"
                        v-for="option in item.options"
                        :key="option"
                        :type="option.checked ? 'primary' : 'default'"
                        @click="handleSelectClick(item.title, option.label)"
                >
                    {{ option.label }}
                </a-button>
                <a-dropdown v-for="option1 in item.subOptions.filter(i=>i.title!=='见肿物')" :key="option1">
                    <template #overlay>
                        <a-menu v-show="option1.title !=='见肿物'"
                                @click="handleMenuClick($event, option1.title, item.title)">
                            <a-menu-item v-for="subOption in option1.options" :key="subOption">
                                {{ subOption }}
                            </a-menu-item>
                        </a-menu>
                    </template>
                    <a-button
                            :size="btnSize"
                            style="margin-right: 6px; margin-top: 6px"
                            v-show="!option1.show"
                    >
                        {{ option1.title }}
                    </a-button>
                </a-dropdown>
                <!--                见肿物-->
                <a-popover v-for="option1 in item.subOptions.filter(i=>i.title==='见肿物')" :key="option1"
                           placement="bottom">
                    <template #content>
                        <a-space direction="vertical">
                            <a-checkbox-group
                                    :options="option1.options.map(option1Item => ({label: option1Item, value: option1Item}))"
                                    v-model:value="ZWCheckBoxValueObject[item.title+option1['title']]"
                                    @change="handleZWCheckBoxChange"
                            >
                            </a-checkbox-group>
                            <a-button type="primary" @click="handleSubmitZW(option1['title'],item.title)">确定
                            </a-button>
                        </a-space>
                    </template>
                    <a-button
                            :size="btnSize"
                            style="margin-right: 6px; margin-top: 6px"
                            v-show="!option1.show"
                    >
                        {{ option1.title }}
                    </a-button>
                </a-popover>
            </a-descriptions-item>
        </a-descriptions>
        <el-descriptions style="margin-top: 6px" border v-show="isLastImage" title="诊断结果">
            <el-descriptions-item>
                <el-checkbox-group v-model="diagnosisResult" @change="handleDiagnosisChange">
                    <el-checkbox v-for="option in diagnosisOptions" :key="option.value" :value="option.value">
                        <template #default>
                            <span v-show="diagnosisResult.indexOf(option.label) + 1 !== 0">
                                {{ diagnosisResult.indexOf(option.label) + 1 }}.
                            </span>
                            {{ option.label }}
                        </template>
                    </el-checkbox>
                </el-checkbox-group>
            </el-descriptions-item>
        </el-descriptions>
        <a-space style="margin-top: 6px">
            <el-button type="primary" @click="submitPatient" v-show="isLastImage">提交</el-button>
            <el-button type="primary" @click="submitAnnotation">保存并下一张</el-button>
            <!--            <el-button style="background-color: greenyellow;" @click="submitAnnotation" v-show="isLastImage">更新当前图片特征</el-button>-->
            <el-button @click="closePreview">关闭</el-button>
        </a-space>
    </a-space>
</template>

<script setup>
import {reactive, ref, watch} from 'vue'

const props = defineProps({
    valueOptions: {
        type: Array,
        required: true
    },
    isLastImage: {
        type: Boolean,
        required: true
    },
    dResult: {
        type: Array,
        required: true
    }
})

const newFeature = ref(['图片质量合格','图片质量不合格'])

watch(
    () => props.valueOptions,
    newValue => {
        // 全部重置
        updateForm([])
        if (!newValue.some(item => newFeature.value.indexOf(item) !== -1)) {
            newValue.push(newFeature.value[0])
        }
        // 更新
        updateForm(newValue)
    }
)

watch(
    () => props.dResult,
    newValue => {
        updateDiagnosisResult(newValue)
    }
)

const emit = defineEmits(['closePreview', 'submitAnnotation', 'submitPatient'])

const annotationForm = ref([
    {
        title: '图片质量',
        options: [
            {label: '合格', checked: false},
            {label: '不合格', checked: false}
        ],
        subOptions: []
    },
    {
        title: '方向',
        options: [
            {label: '左侧', checked: false},
            {label: '右侧', checked: false}
        ],
        subOptions: []
    },
    {
        title: '鼻腔粘膜',
        options: [
            {label: '未见异常', checked: false},
            {label: '淡红', checked: false},
            {label: '充血', checked: false},
            {label: '苍白', checked: false},
            {label: '水肿', checked: false},
            {label: '萎缩', checked: false}
        ],
        subOptions: []
    },
    {
        title: '鼻中隔',
        options: [
            {label: '未见异常', checked: false},
            {label: '居中', checked: false}
        ],
        subOptions: [
            {
                title: '偏曲',
                options: ['左侧', '右侧', 'S型']
            },
            {
                title: '嵴突',
                options: ['左侧', '右侧']
            },
            {
                title: '棘突',
                options: ['左侧', '右侧']
            },
            {
                title: '黎氏区充血',
                options: ['左侧', '右侧']
            },
            {
                title: '鼻中隔穿孔',
                options: ['左侧', '右侧']
            }
        ]
    },
    {
        title: '总鼻道/鼻腔',
        options: [{label: '未见异常', checked: false}],
        subOptions: [
            {
                title: '分泌物',
                options: ['见水样', '见脓性', '见粘性']
            },
            {
                title: '见肿物',
                options: ['暗红', '充血', '灰白', '光滑', '不平', '粗糙']
            }
        ]
    },
    {
        title: '下鼻甲',
        options: [
            {label: '未见异常', checked: false},
            {label: '无肿大', checked: false},
            {label: '苍白', checked: false},
            {label: '下鼻甲肥大', checked: false},
            {label: '下鼻甲桑甚样改变', checked: false},
            {label: '下鼻甲息肉样变', checked: false},
            {label: '下鼻甲缺失', checked: false},
            {label: '充血', checked: false},
            {label: '肿胀', checked: false}
        ],
        subOptions: []
    },
    {
        title: '中鼻甲',
        options: [
            {label: '未见异常', checked: false},
            {label: '无肿大', checked: false},
            {label: '苍白', checked: false},
            {label: '中鼻甲肥大', checked: false},
            {label: '泡状中鼻甲', checked: false},
            {label: '中鼻甲息肉样变', checked: false},
            {label: '中鼻甲缺失', checked: false},
            {label: '充血', checked: false},
            {label: '肿胀', checked: false}
        ],
        subOptions: []
    },
    {
        title: '中鼻道',
        options: [
            {label: '未见异常', checked: false},
            {label: '充血', checked: false},
            {label: '肿胀', checked: false}
        ],
        subOptions: [
            {
                title: '分泌物',
                options: ['见水样', '见脓性', '见粘性']
            },
            {
                title: '见肿物',
                options: ['暗红', '充血', '灰白', '光滑', '不平', '粗糙']
            }
        ]
    },
    {
        title: '嗅裂',
        options: [
            {label: '未见异常', checked: false},
            {label: '充血', checked: false},
            {label: '肿胀', checked: false}
        ],
        subOptions: [
            {
                title: '分泌物',
                options: ['见水样', '见脓性', '见粘性']
            },
            {
                title: '见肿物',
                options: ['暗红', '充血', '灰白', '光滑', '不平', '粗糙']
            }
        ]
    },
    {
        title: '鼻咽',
        options: [
            {label: '未见异常', checked: false},
            {label: '充血', checked: false},
            {label: '肿胀', checked: false},
            {label: '肥大', checked: false}
        ],
        subOptions: [
            {
                title: '分泌物',
                options: ['见水样', '见脓性', '见粘性']
            },
            {
                title: '见肿物',
                options: ['暗红', '充血', '灰白', '光滑', '不平', '粗糙']
            }
        ]
    }
])

const handleSelectClick = (title, label) => {
    const target = annotationForm.value.find(item => item.title === title)
    if (target) {
        const option = target.options.find(item => item.label === label)
        if (['左侧', '右侧'].includes(label)) {
            option.checked = !option.checked
            // 处理单选一选项的更新逻辑
            const anotherOption = target.options.find(item => item.label !== label)
            if (anotherOption && option.checked) {
                anotherOption.checked = false
            }
            return
        }
        if (['合格', '不合格'].includes(label)) {
            option.checked = !option.checked
            // 处理单选一选项的更新逻辑
            const anotherOption = target.options.find(item => item.label !== label)
            if (anotherOption && option.checked) {
                anotherOption.checked = false
            }
            return
        }
        // 处理多选一选项的更新逻辑
        if (option && option.isNew) {
            target.options = target.options.filter(item => item.label !== label)
            for (const item of target.subOptions) {
                if (label.includes(item.title)) {
                    item.show = false
                    break
                }
            }
        } else {
            option.checked = !option.checked
        }
    }
}
const ZWCheckBoxValueObject = reactive({})
const handleZWCheckBoxChange = (value) => {

}
const handleSubmitZW = (title, typeTitle) => {
    const objKey = typeTitle + title
    const targetArr = ZWCheckBoxValueObject[objKey].map(label=>title+label)
    const target = annotationForm.value.find(item => item.title === typeTitle)
    if (target) {
        // 以targetArr里面的为准
        // 删除
        const existArr = target.options.filter(i=>i.label.includes(title))
        let filter = existArr.filter(l=>!targetArr.includes(l));
        if (filter.length !== 0){
            for (const s of filter){
                const tIndex = target.options.findIndex(i=>i.label === s)
                target.options.splice(tIndex,1)
            }
        }

        // 添加
        for (const option of targetArr){
            const existIndex = target.options.findIndex(i=>i.label ===option)
            if (existIndex===-1){
                target.options.push({
                    label:option,
                    checked:true,
                    isNew:true
                })
            }
        }

    }
}
const handleMenuClick = (e, title, typeTitle) => {
    const {key} = e
    console.log("selected",key)

    const target = annotationForm.value.find(item => item.title === typeTitle)
    if (target) {
        target.options.push({label: title+key, checked: true, isNew: true})
        const subTarget = target.subOptions.find(item => item.title === title)
        if (subTarget) {
            subTarget.show = true
        }
    }
}

const submitAnnotation = () => {
    let valueOptions = annotationForm.value.map(item => {
        const arr = item.options.filter(option => option.checked)
        if (arr.length !== 0) {
            return arr.map(option => item.title + option.label)
        }
    }).flat().filter(item => item)

    emit('submitAnnotation', valueOptions)
}
const submitPatient = () => {
    let result = diagnosisResult.value.map((item, index) => {
        return index + 1 + item
    }).join(';')

    emit('submitPatient', result)
}

const closePreview = () => {
    emit('close-preview')
}
const updateForm = valueOptions => {
    if (valueOptions.length === 0) {
        // 初始化
        annotationForm.value.forEach(item => {
            item.options.forEach(item => {
                item.checked = false
            })
            item.options = item.options.filter(item => !item.isNew)
            item.subOptions.forEach(item => {
                item.show = false
            })
        })
        return
    }
    for (const value of valueOptions) {
        // 找到分类行
        const target = annotationForm.value.find(item => value?.includes(item.title))
        if (target) {
            const option = value.replace(target.title, '')
            // 分直选和多合一分选
            const radioOptions = target.options.map(item => item.label)
            // const multiSelectOptions = target.subOptions.map(item => item.title)
            // 处理单选一选项的更新逻辑
            if (radioOptions.includes(option)) {
                // 全部初始化再更新
                // target.options.forEach(item => {
                //     item.checked = false
                // })
                const optionTarget = target.options.find(item => item.label === option)
                if (optionTarget) {
                    optionTarget.checked = true
                }
            } else {
                // // 全部初始化再更新
                // target.options = target.options.filter(item =>!item.isNew)
                // 处理多选一选项的更新逻辑
                const subTarget = target.subOptions.find(item => option.includes(item.title))
                if (subTarget) {
                    subTarget.show = true
                    target.options.push({label: option, checked: true, isNew: true})
                }
            }
        }
    }
}

const updateDiagnosisResult = dResult => {
    diagnosisResult.value = dResult
}

const getForm = () => {
    return annotationForm.value
}

const diagnosisResult = ref([])
const diagnosisOptions = ref([
    {label: '正常', value: '正常'},
    {label: '鼻前庭炎', value: '鼻前庭炎'},
    {label: '急性鼻炎', value: '急性鼻炎'},
    {label: '慢性单纯性鼻炎', value: '慢性单纯性鼻炎'},
    {label: '非变应性鼻炎', value: '非变应性鼻炎'},
    {label: '过敏性鼻炎/变应性鼻炎', value: '过敏性鼻炎/变应性鼻炎'},
    {label: '急性鼻窦炎', value: '急性鼻窦炎'},
    {label: '慢性肥厚性鼻炎', value: '慢性肥厚性鼻炎'},
    {label: '鼻中隔偏曲', value: '鼻中隔偏曲'},
    {label: '慢性鼻窦炎', value: '慢性鼻窦炎'},
    {label: '慢性鼻窦炎伴鼻息肉', value: '慢性鼻窦炎伴鼻息肉'},
    {label: '鼻咽癌', value: '鼻咽癌'},
    {label: '鼻出血', value: '鼻出血'},
    {label: '鼻炎', value: '鼻炎'},
    {label: '腺样体肥大', value: '腺样体肥大'},
    {label: '鼻窦炎', value: '鼻窦炎'},
    {label: '鼻咽炎', value: '鼻咽炎'},
    {label: '鼻咽囊肿', value: '鼻咽囊肿'},
    {label: '鼻息肉', value: '鼻息肉'},
    {label: '真菌性鼻窦炎', value: '真菌性鼻窦炎'},
    {label: '血管瘤', value: '血管瘤'},
    {label: '内翻性乳头状瘤', value: '内翻性乳头状瘤'},
    {label: '鼻腔肿物性质待查', value: '鼻腔肿物性质待查'},
    {label: '鼻窦肿物性质待查', value: '鼻窦肿物性质待查'},
    {label: '鼻咽肿物性质待查', value: '鼻咽肿物性质待查'}
])
const handleDiagnosisChange = item => {
    if (!item.checked) {
        // const index = this.diagnosisResult.findIndex(d => d.value === item.value);
        // if (index !== -1) {
        //     this.annotationForm.data.splice(index, 1);
        // }
    }
}
const btnSize = ref('small')
const handleChangeBtnSize = size => {
    btnSize.value = size
}

defineExpose({
    getForm,
    updateForm,
    closePreview,
    submitAnnotation
})
</script>

<style scoped></style>
